<template>
	<view style="background-color: #f8f8f8;height: 100vh;">
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;align-items: center;">
				<view style="margin-right: 20rpx;width: 130rpx;">订单编号:</view>
				<div style="flex: 1;">
					<u-input v-model="form.customsCode" :type="type" border />
				</div>
				
			</view>
			<view class="" style="margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<view style="margin-right: 20rpx;width: 130rpx;">运输方式:</view>
					<view class="" style="flex: 1;">
						<u-input v-model="form.transTypeCodeN" :type="type" border disabled placeholder=" " @click="show2=true"></u-input>
					</view>
				</view>
				<u-select v-model="show2" :list="list2" @confirm="confirm2"></u-select>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx 0;">
				<view class="" style="">
					<view style="display: flex;align-items: center;">
						<view style="margin-right: 20rpx;width: 130rpx;">状态筛选:</view>
						<view class="" style="">
							<u-input v-model="form.ioTypeN" :type="type" border disabled placeholder=" " @click="show=true"></u-input>
						</view>
					</view>
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				</view>
				<view class="">
					<u-button type="primary" :custom-style="customStyle" @click="getOrder()">
						<view class="" style="font-size: 26rpx;">
							搜索
						</view>
					</u-button>
				</view>
			</view>
		</view>
		<view class="" style="height: 300rpx;" v-if="orderList.length==0">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
		<view class="" v-for="(item,index) in orderList">
			<view class="" style="background-color: #f8f8f8;height: 26rpx;"></view>
			<view class="" style="background-color: #fff;padding: 0 30rpx;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #efefef;padding: 20rpx 0">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/img/uys.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="" style="font-weight: bold;margin-left: 30rpx;">
							客户姓名:{{item.customerName}}
						</view>
					</view>
					<view class="">
						<view class="" v-if="item.ioType==1">
							<u-tag text="出口" type="primary" mode="light" shape="circle" />
						</view>
						<view class="" v-if="item.ioType==2">
							<u-tag text="进口" type="success" mode="light" shape="circle" />
						</view>
					</view>
				</view>
				<view class="">
					<view class="" style="padding: 30rpx 0;border-bottom: 1rpx solid #efefef;">
						<view class="">
							<text style="color: #9d9d9d;">订单单号：</text> {{item.customsCode}}
						</view>
						<view class="" style="margin-top: 30rpx;">
							<text style="color: #9d9d9d;">放行时间：</text> {{item.passTime}}
						</view>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;padding: 30rpx 0;" @click="toOrderDetail(item)">
					<view class="">
						查看更多
					</view>
					<view class="">
						>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="">
			<view class="" style="background-color: #f8f8f8;height: 26rpx;"></view>
			<view class="" style="background-color: #fff;padding: 0 20rpx;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #efefef;padding: 20rpx 0">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/logo.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="" style="font-weight: bold;margin-left: 30rpx;">
							客户姓名:xxx
						</view>
					</view>
					<view class="">
						<u-tag text="进口" type="success" mode="dark" shape="circle" />
					</view>
				</view>
				<view class="">
					<view class="" style="padding: 30rpx 0;border-bottom: 1rpx solid #efefef;">
						<view class="">
							<text style="color: #d5d5d5;">报关单号：</text> 111111
						</view>
						<view class="" style="margin-top: 30rpx;">
							<text style="color: #d5d5d5;">放行时间：</text> 111111
						</view>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;padding: 30rpx 0;">
					<view class="">
						查看更多
					</view>
					<view class="">
						>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				show2:false,
				form:{
					page:'1',
					pageSize:'100',
					ioTypeN:'',
					ioType:'',
					customsCode:''
				},
				order:{},
				orderList:[],
				list: [
					{
						value: '1',
						label: '出口'
					},
					{
						value: '2',
						label: '进口'
					}
				],
				list2: [
					{
						value: '1',
						label: '铁路'
					},
					{
						value: '2',
						label: '公路'
					},
					{
						value: '3',
						label: '海运'
					},
					{
						value: '4',
						label: '空运'
					}
				]
				
			}
		},
		onShow() {
			this.getOrder()
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.form.ioTypeN = e[0].label
				this.form.ioType = e[0].value
			},
			confirm2(e) {
				console.log(e);
				this.form.transTypeCodeN = e[0].label
				this.form.transTypeCode = e[0].value
			},
			async getOrder(){
				const res = await this.$api.OrderList(this.form)
				console.log(res)
				if(res.code==1){
					this.order = res.data
					this.orderList = this.order.data
				}else{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			toOrderDetail(item){
				console.log(item.id)
				uni.navigateTo({
					url:'/pages/order/orderDetail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	
</style>
